import { ComponentProps, Computed, Hook, Link, Mut, VueComponent } from "vue3-oop"
import { Upload,Image, UploadChangeParam,message, Space } from 'ant-design-vue';
import { PlusOutlined,DeleteOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { WidgetNode } from '../../types'
import { IMAGE,defaultFallback } from "./attr-image";
import moduleCss from './fvr-image.module.scss'

interface IProps {
  widgetNode: WidgetNode
}
export default class FvrImage extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  @Mut() state = {
    loading: false
  }

  @Hook('Mounted')
  onMounted(){
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem[widgetItem.type] as IMAGE;
    
    if(!attr.field_value||attr.field_value===''){
      attr.field_value = attr.field_default;
    }
  }

  clearImage=(e:MouseEvent)=>{
    e.stopPropagation();
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem[widgetItem.type] as IMAGE;
    attr.field_value = '';
  }

  triggerUpload=(e:MouseEvent)=>{
    e.stopPropagation();
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem[widgetItem.type] as IMAGE;
    if(attr.field_value===''){
      (document.querySelector(`.${moduleCss['image-upload']} input`) as any).click()
    }
  }
  
  beforeUpload = (file: any) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };

  handleChange = (info: UploadChangeParam) => {
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem[widgetItem.type] as IMAGE;

    if (info.file.status === 'uploading') {
      this.state.loading = true;
      return;
    }
    if (info.file.status === 'done') {
      attr.field_value = info.file.response.url;
      this.state.loading = false;
    }
    if (info.file.status === 'error') {
      this.state.loading = false;
      message.error('upload error');
    }
  };

  render() {
    const { widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    const attr = widgetItem[widgetItem.type] as IMAGE;

    const fallback = (!attr.field_default||attr.field_default===''||attr.field_default==='default')?defaultFallback:attr.field_default
    return (
      <div
        class={[moduleCss['fvr-image']]}
        style={{
          width:`${attr.width}px`,
          height:`${attr.height}px`
        }}
      >
        { attr.field_value.length===0 &&
          <div
            class={[moduleCss['image-toupload']]}
            style={{width:`${attr.width}px`,height:`${attr.height}px`}}
            onClick={this.triggerUpload}
          >
            {this.state.loading?<LoadingOutlined/>:<PlusOutlined/>}
            <div>点击上传</div>
          </div>
        }
        { attr.field_value.length>0 && <>
          <Image 
            class={[moduleCss['image-image']]}
            width={attr.width}
            height={attr.height}
            alt={attr.field_label}
            src={attr.field_value}
            fallback={fallback}
            placeholder={true}
          />
          <div class={[moduleCss['image-tool']]} >
            <div style={{fontSize:'22px',marginRight:'8px'}} onClick={this.clearImage}><DeleteOutlined/></div>
          </div>
          </>
        }
        <Upload
          class={[moduleCss['image-upload']]}
          maxCount={1}
          listType={'picture-card'}
          showUploadList={false}
          name={'image'}
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          beforeUpload={this.beforeUpload}
          onChange={this.handleChange}
        />
      </div>
      
    )
  }
}